<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <!-- Fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
	    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
	    <!-- CSS Libs -->
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-table.min.css" />
	    <!-- CSS App -->
	    <link rel="stylesheet" type="text/css" href="../css/style.css">
	    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	</head>
	<body>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h1 class="panel-title" style="font-size: 28px;">
					<a href="">
						<i class="glyphicon glyphicon-chevron-left" style="border: 2px solid #1D2939;border-radius: 50px;font-size: 28px;"></i>
					</a>
					Table
				</h1>
			</div>
			<div class="panel-body">
				<div class="row">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-sm-3">tableName</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" id="tableName" name="tableName"/>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">remark</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" id="remark" name="remark"/>
							</div>
						</div>
					</form>
				</div>
				
				
				<div class="row">
					<button class="btn btn-primary" id="btn-add">Add</button>
					<button class="btn btn-primary" id="btn-delete">delete</button>
				</div>
				<table class="table table-striped form-group">
					<thead>
						<tr>
							<td>option</td>
							<td>name</td>
							<td>reamrk</td>
							<td>maxLength</td>
							<td>default</td>
							<td>type</td>
							<td>unique</td>
							<td>nullable</td>
							<td>formShow</td>
							<td>listShow</td>
							<td>ctrlType</td>
							<td>isQuery</td>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div class="row text-center">
					<button class="btn btn-primary" id="btn-save">save</button>
				</div>
			</div>
		</div>        
	    <!-- Javascript Libs -->
        <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
	
	    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
	    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table-zh-CN.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
	    <!-- Javascript -->
	    <script type="text/javascript" src="../js/_app.js"></script>
	    <script type="application/javascript">
	    	$(function(){
	    		$('#btn-add').click(function(){
	    			$('table tbody').append($(`<tr>
							<td><input class="form-control" type="checkbox" name="option"/></td>
							<td><input class="form-control" name="name"/></td>
							<td><input class="form-control" name="reamrk"/></td>
							<td><input class="form-control" type="number" name="maxLength"/></td>
							<td><input class="form-control" name="default"/></td>
							<td>
								<select class="form-control" name="type">
									<option>String</option>
									<option>Integer</option>
									<option>Double</option>
									<option>Date</option>
									<option>Boolean</option>
								</select>
							</td>
							<td><input class="form-control" type="checkbox" name="unique"/></td>
							<td><input class="form-control" type="checkbox" name="nullable"/></td>
							<td><input class="form-control" type="checkbox" name="formShow"/></td>
							<td><input class="form-control" type="checkbox" name="listShow"/></td>
							<td>
								<select class="form-control" name="ctrlType">
									<option>text</option>
									<option>password</option>
									<option>radio</option>
									<option>checkbox</option>
									<option>date</option>
									<option>datetime</option>
									<option>file</option>
									<option>textarea</option>
									<option>select</option>
								</select>
							</td>
							<td><input class="form-control" type="checkbox" name="isQuery"/></td>
						</tr>`));
	    		});
	    		$('#btn-delete').click(function(){
	    			$('table tbody tr').each(function(){
	    				if($(this).find('input[type="checkbox"]').eq(0).is(':checked')){
		    				$(this).remove();
	    				}
	    			});
	    		});
	    		$('#btn-save').click(function(){
	    			var jsonData = {"columns":[]};
	    			$('table tbody tr').each(function(){
	    				var tr_data = {};
	    				
	    				tr_data.option      = $(this).find('*[name="option"]').is(':checked');
						tr_data.name        = $(this).find('*[name="name"]').val();
						tr_data.reamrk      = $(this).find('*[name="reamrk"]').val();
						tr_data.maxLength   = $(this).find('*[name="maxLength"]').val();
						tr_data.default     = $(this).find('*[name="default"]').val();
						tr_data.type        = $(this).find('*[name="type"]').val();
						tr_data.unique      = $(this).find('*[name="unique"]').is(':checked');
						tr_data.nullable    = $(this).find('*[name="nullable"]').is(':checked');
						tr_data.formShow    = $(this).find('*[name="formShow"]').is(':checked');
						tr_data.listShow    = $(this).find('*[name="listShow"]').is(':checked');
						tr_data.ctrlType    = $(this).find('*[name="ctrlType"]').val();
						tr_data.isQuery     = $(this).find('*[name="isQuery"]').is(':checked');
						
	    				jsonData.columns.push(tr_data);
	    			});
	    			console.log(jsonData);
	    		});
	    	})
	    </script>
	</body>
</html>
